<!-- SPDX-FileCopyrightText: Copyright (c) 2022-2025 trobonox <hello@trobo.dev> -->
<!-- -->
<!-- SPDX-License-Identifier: GPL-3.0-or-later -->
<!--
Kanri is an offline Kanban board app made using Tauri and Nuxt.
Copyright (C) 2022-2025 trobonox <hello@trobo.dev>

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see <https://www.gnu.org/licenses/>. -->

<template>
  <TooltipProvider>
    <TooltipRoot :delay-duration="200">
      <TooltipTrigger>
        <slot name="trigger" />
      </TooltipTrigger>
      <TooltipPortal to=".default-layout">
        <TooltipContent :side="direction" :class="tooltipClass">
          <slot name="content" />
          <TooltipArrow class="fill-bg-primary-darker" :width="10" />
        </TooltipContent>
      </TooltipPortal>
    </TooltipRoot>
  </TooltipProvider>
</template>

<script setup lang="ts">
withDefaults(
  defineProps<{
    direction?: "right" | "top" | "bottom" | "left";
  }>(),
  {
    direction: "right",
  }
);

const globalSettingsStore = useSettingsStore();

const tooltipClass = computed(() => {
  let tooltipClasses =
    "border-elevation-1 bg-primary-darker z-[999999999] select-none rounded-[4px] border px-[15px] py-[10px] text-[15px] leading-none shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] will-change-[transform,opacity]";

  if (globalSettingsStore.animationsEnabled !== false) {
    tooltipClasses +=
      " data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade";
  }

  return tooltipClasses;
});
</script>
